<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--表数据-->
      <el-col :span="24" :xs="24">
        <el-tabs v-model="activeTab" type="border-card" @tab-click="tabClick">
          <el-tab-pane label="待审批" name="waitApproval">
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-plus"
                  size="mini"
                  :disabled="single"
                  v-hasPermi="['manage:approval:agree']"
                  @click="agreeHandle()"
                >同意</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="success"
                  plain
                  icon="el-icon-edit"
                  size="mini"
                  :disabled="single"
                  v-hasPermi="['manage:approval:refuse']"
                  @click="refuseHandle()"
                >拒绝</el-button>
              </el-col>
            </el-row>
            <el-table  :data="waitApprovalList" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="id" align="center" prop="id" v-if="false"/>
              <el-table-column  align="center" prop="userId" v-if="false"/>
              <el-table-column align="center" prop="communityId" v-if="false"/>
              <el-table-column label="申请人" align="center" prop="userName" />
              <el-table-column label="社团名称" align="center" prop="cname" />
              <el-table-column label="申请时间" align="center" prop="applyTime" width="180"/>
              <el-table-column label="审批状态" align="center" prop="applyStatus" >
                <template slot-scope="scope">
                  <el-tag type="success">待审批</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    v-hasPermi="['manage:approval:agree']"
                    @click="agreeHandle(scope.row)"
                  >同意</el-button>
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    v-hasPermi="['manage:approval:refuse']"
                    @click="refuseHandle(scope.row)"
                  >拒绝</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getWaitApproval"/>
          </el-tab-pane>
          <el-tab-pane label="已同意" name="agree">
            <el-table  :data="agreeList">
              <el-table-column label="申请人" align="center" prop="userName" />
              <el-table-column label="社团名称" align="center" prop="cname" />
              <el-table-column label="申请时间" align="center" prop="applyTime" width="180"/>
              <el-table-column label="审批状态" align="center" prop="applyStatus" >
                <template slot-scope="scope">
                  <el-tag >已同意</el-tag>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total1>0"
              :total="total1"
              :page.sync="queryParams1.pageNum"
              :limit.sync="queryParams1.pageSize"
              @pagination="getAgreeList"/>
          </el-tab-pane>
          <el-tab-pane label="已拒绝" name="refuse">
            <el-table  :data="refuseList" >
              <el-table-column label="申请人" align="center" prop="userName" />
              <el-table-column label="社团名称" align="center" prop="cname" />
              <el-table-column label="申请时间" align="center" prop="applyTime" width="180"/>
              <el-table-column label="审批状态" align="center" prop="applyStatus" >
                <template slot-scope="scope">
                  <el-tag type="danger">已拒绝</el-tag>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total2>0"
              :total="total2"
              :page.sync="queryParams2.pageNum"
              :limit.sync="queryParams2.pageSize"
              @pagination="getRefuseList"/>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { getWaitApprovalByUser,getAgreeByUser,getRefuseByUser,agreeJoinCmt,refuseJoinCmt } from "@/api/manage/community";
  import store from "@/store";
    export default {
      name: "communityApproval",
      components: {},
      data() {
        return {
          // 选中数组
          ids: [],
          // 非单个禁用
          single: true,
          // 非多个禁用
          multiple: true,
          // 显示搜索条件
          showSearch: true,
          // 总条数
          total: 0,
          total1: 0,
          total2: 0,
          // 待审批表格数据
          waitApprovalList: [],
          agreeList: [],
          refuseList: [],
          // 弹出层标题
          title: "",
          // 是否显示弹出层
          open: false,
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10
          },
          queryParams1: {
            pageNum: 1,
            pageSize: 10
          },
          queryParams2: {
            pageNum: 1,
            pageSize: 10
          },
          activeTab:'waitApproval',
        };
      },
      created() {
        this.getWaitApproval();
      },
      methods: {

        /** 查询待审批列表 */
        getWaitApproval() {
          getWaitApprovalByUser(store.getters.userId).then(response => {
            this.waitApprovalList = response.rows;
            this.total = response.total;
          });
        },
        getAgreeList() {
          getAgreeByUser(store.getters.userId).then(response => {
            this.agreeList = response.rows;
            this.total1 = response.total;
          });
        },
        getRefuseList() {
          getRefuseByUser(store.getters.userId).then(response => {
            this.refuseList = response.rows;
            this.total2 = response.total;
          });
        },

        /** tab 切换 */
        tabClick() {
          if(this.activeTab == 'waitApproval'){
            this.getWaitApproval()
          }else if (this.activeTab == 'agree'){
            this.getAgreeList()
          }else {
            this.getRefuseList()
          }
        },

        // 多选框选中数据
        handleSelectionChange(selection) {
          this.ids = selection.map(item => item.id)
          this.single = selection.length!==1
          this.multiple = !selection.length
        },

        /** 同意按钮操作 */
        agreeHandle(row){
          const ids = row.id || this.ids;
          this.$confirm('是否同意用户编号："' + ids + '"的数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return agreeJoinCmt(ids);
          }).then(() => {
            this.getWaitApproval();
            this.msgSuccess("已同意");
          })
        },

        /** 拒绝按钮操作 */
        refuseHandle(row){
          const ids = row.id || this.ids;
          this.$confirm('是否拒绝用户编号："' + ids + '"的数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return refuseJoinCmt(ids);
          }).then(() => {
            this.getWaitApproval();
            this.msgSuccess("已拒绝");
          })
        },
      }
    }
</script>

<style scoped>

</style>
